<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发票详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-blue-500 to-indigo-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <button onclick="goBack()" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </button>
                <h1 class="text-lg font-semibold">发票详情</h1>
                <button onclick="shareInvoice()" class="text-white hover:opacity-80">
                    <i class="fas fa-share text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Invoice Status -->
        <div class="bg-white border-b border-gray-200">
            <div class="px-4 py-4 text-center">
                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-check text-green-600 text-2xl"></i>
                </div>
                <h2 class="text-lg font-semibold text-gray-800 mb-1">开票成功</h2>
                <p class="text-sm text-gray-600 mb-3">发票已开具，可下载或发送</p>
                <p class="text-xs text-gray-500" id="invoiceNumber">发票号码：12345678901234567890</p>
            </div>
        </div>

        <!-- Content -->
        <div class="h-[calc(852px-200px)] overflow-y-auto pb-24">
            <!-- Invoice Basic Info -->
            <div class="bg-white border-b border-gray-200">
                <div class="px-4 py-4">
                    <h3 class="font-medium mb-4 flex items-center">
                        <i class="fas fa-file-invoice text-blue-500 mr-2"></i>
                        发票信息
                    </h3>
                    
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">发票类型</span>
                            <span class="text-sm font-medium" id="invoiceType">普通发票</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">开票金额</span>
                            <span class="text-sm font-medium text-blue-600" id="invoiceAmount">¥12,580.00</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">开票日期</span>
                            <span class="text-sm" id="invoiceDate">2025-01-05</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">发票状态</span>
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">已开票</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Seller Information -->
            <div class="bg-white border-b border-gray-200">
                <div class="px-4 py-4">
                    <h3 class="font-medium mb-4 flex items-center">
                        <i class="fas fa-store text-purple-500 mr-2"></i>
                        销售方信息
                    </h3>
                    
                    <div class="space-y-3">
                        <div class="flex justify-between items-start">
                            <span class="text-sm text-gray-600">销售方名称</span>
                            <span class="text-sm text-right">北京科技服务有限公司</span>
                        </div>
                        <div class="flex justify-between items-start">
                            <span class="text-sm text-gray-600">纳税人识别号</span>
                            <span class="text-sm text-right font-mono">91110000MA01234567</span>
                        </div>
                        <div class="flex justify-between items-start">
                            <span class="text-sm text-gray-600">地址电话</span>
                            <span class="text-sm text-right">北京市朝阳区科技路100号 010-12345678</span>
                        </div>
                        <div class="flex justify-between items-start">
                            <span class="text-sm text-gray-600">开户行及账号</span>
                            <span class="text-sm text-right">工商银行朝阳支行 1234567890123456789</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Buyer Information -->
            <div class="bg-white border-b border-gray-200">
                <div class="px-4 py-4">
                    <h3 class="font-medium mb-4 flex items-center">
                        <i class="fas fa-building text-green-500 mr-2"></i>
                        购买方信息
                    </h3>
                    
                    <div class="space-y-3">
                        <div class="flex justify-between items-start">
                            <span class="text-sm text-gray-600">购买方名称</span>
                            <span class="text-sm text-right" id="buyerName">北京科技有限公司</span>
                        </div>
                        <div class="flex justify-between items-start" id="buyerTaxInfo" style="display: none;">
                            <span class="text-sm text-gray-600">纳税人识别号</span>
                            <span class="text-sm text-right font-mono" id="buyerTaxId">91110000MA98765432</span>
                        </div>
                        <div class="flex justify-between items-start" id="buyerAddressInfo" style="display: none;">
                            <span class="text-sm text-gray-600">地址电话</span>
                            <span class="text-sm text-right" id="buyerAddress">北京市海淀区中关村大街123号 010-87654321</span>
                        </div>
                        <div class="flex justify-between items-start" id="buyerBankInfo" style="display: none;">
                            <span class="text-sm text-gray-600">开户行及账号</span>
                            <span class="text-sm text-right" id="buyerBank">建设银行中关村支行 9876543210987654321</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Invoice Content -->
            <div class="bg-white border-b border-gray-200">
                <div class="px-4 py-4">
                    <h3 class="font-medium mb-4 flex items-center">
                        <i class="fas fa-list text-orange-500 mr-2"></i>
                        发票内容
                    </h3>
                    
                    <div class="bg-gray-50 rounded-lg p-3">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm text-gray-600">项目名称</span>
                            <span class="text-sm font-medium" id="invoiceItem">商品销售</span>
                        </div>
                        <div class="mb-2">
                            <span class="text-sm text-gray-600">内容描述</span>
                            <p class="text-sm text-gray-800 mt-1" id="invoiceContent">商品销售服务费及相关技术服务</p>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">合计金额</span>
                            <span class="text-lg font-bold text-blue-600" id="totalAmount">¥12,580.00</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tax Details -->
            <div class="bg-white border-b border-gray-200" id="taxDetails">
                <div class="px-4 py-4">
                    <h3 class="font-medium mb-4 flex items-center">
                        <i class="fas fa-percentage text-red-500 mr-2"></i>
                        税额明细
                    </h3>
                    
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">税率</span>
                            <span class="text-sm">13%</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">税额</span>
                            <span class="text-sm font-medium text-red-600">¥1,466.38</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">价税合计</span>
                            <span class="text-sm font-bold">¥12,580.00</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Information -->
            <div class="bg-white border-b border-gray-200">
                <div class="px-4 py-4">
                    <h3 class="font-medium mb-4 flex items-center">
                        <i class="fas fa-info-circle text-gray-500 mr-2"></i>
                        其他信息
                    </h3>
                    
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">开票员</span>
                            <span class="text-sm">张三</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">复核人</span>
                            <span class="text-sm">李四</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">收款人</span>
                            <span class="text-sm">王五</span>
                        </div>
                        <div class="flex justify-between items-start">
                            <span class="text-sm text-gray-600">备注</span>
                            <span class="text-sm text-right" id="invoiceRemarks">电商平台服务费用</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- QR Code -->
            <div class="bg-white">
                <div class="px-4 py-4">
                    <h3 class="font-medium mb-4 flex items-center">
                        <i class="fas fa-qrcode text-indigo-500 mr-2"></i>
                        发票二维码
                    </h3>
                    
                    <div class="text-center">
                        <div class="w-32 h-32 bg-gray-200 rounded-lg mx-auto mb-3 flex items-center justify-center">
                            <i class="fas fa-qrcode text-6xl text-gray-400"></i>
                        </div>
                        <p class="text-xs text-gray-500">扫码验证发票真伪</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Actions -->
        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <div class="flex gap-3">
                <button onclick="downloadInvoice()" class="flex-1 bg-green-100 text-green-700 py-3 rounded-lg font-medium hover:bg-green-200 transition-colors">
                    <i class="fas fa-download mr-2"></i>下载PDF
                </button>
                <button onclick="sendInvoice()" class="flex-1 bg-blue-100 text-blue-700 py-3 rounded-lg font-medium hover:bg-blue-200 transition-colors">
                    <i class="fas fa-envelope mr-2"></i>发送邮件
                </button>
                <button onclick="printInvoice()" class="flex-1 bg-gradient-to-r from-blue-500 to-indigo-500 text-white py-3 rounded-lg font-medium hover:opacity-90 transition-opacity">
                    <i class="fas fa-print mr-2"></i>打印
                </button>
            </div>
        </div>
    </div>

    <script>
        // Mock invoice data
        const invoiceData = {
            'completed': {
                number: '12345678901234567890',
                type: '普通发票',
                amount: '¥12,580.00',
                date: '2025-01-05',
                buyer: '北京科技有限公司',
                item: '商品销售',
                content: '商品销售服务费及相关技术服务',
                remarks: '电商平台服务费用',
                isVat: false
            },
            'vat-completed': {
                number: '98765432109876543210',
                type: '增值税专用发票',
                amount: '¥8,750.00',
                date: '2025-01-04',
                buyer: '上海贸易公司',
                buyerTaxId: '91310000MA12345678',
                buyerAddress: '上海市浦东新区陆家嘴金融区100号 021-12345678',
                buyerBank: '浦发银行陆家嘴支行 1357924680135792468',
                item: '技术服务',
                content: '电子商务平台技术服务费',
                remarks: 'B2B平台技术服务',
                isVat: true
            }
        };

        // Get invoice type from URL parameters
        function getInvoiceType() {
            const urlParams = new URLSearchParams(window.location.search);
            const invoiceId = urlParams.get('id');
            const type = urlParams.get('type');
            
            // Determine invoice data based on ID or type
            if (invoiceId && invoiceId.includes('VAT') || type === 'vat') {
                return 'vat-completed';
            }
            return 'completed';
        }

        // Initialize invoice details
        function initializeInvoice() {
            const invoiceType = getInvoiceType();
            const invoice = invoiceData[invoiceType];
            
            if (!invoice) return;

            // Update basic information
            document.getElementById('invoiceNumber').textContent = `发票号码：${invoice.number}`;
            document.getElementById('invoiceType').textContent = invoice.type;
            document.getElementById('invoiceAmount').textContent = invoice.amount;
            document.getElementById('invoiceDate').textContent = invoice.date;
            document.getElementById('buyerName').textContent = invoice.buyer;
            document.getElementById('invoiceItem').textContent = invoice.item;
            document.getElementById('invoiceContent').textContent = invoice.content;
            document.getElementById('totalAmount').textContent = invoice.amount;
            document.getElementById('invoiceRemarks').textContent = invoice.remarks;

            // Handle VAT specific information
            if (invoice.isVat) {
                document.getElementById('buyerTaxInfo').style.display = 'flex';
                document.getElementById('buyerAddressInfo').style.display = 'flex';
                document.getElementById('buyerBankInfo').style.display = 'flex';
                document.getElementById('taxDetails').style.display = 'block';
                
                document.getElementById('buyerTaxId').textContent = invoice.buyerTaxId;
                document.getElementById('buyerAddress').textContent = invoice.buyerAddress;
                document.getElementById('buyerBank').textContent = invoice.buyerBank;
            } else {
                document.getElementById('taxDetails').style.display = 'none';
            }
        }

        // Action functions
        function goBack() {
            if (document.referrer && document.referrer.includes('b2b-invoice.html')) {
                window.location.href = 'b2b-invoice.html';
            } else {
                window.history.back();
            }
        }

        function shareInvoice() {
            const invoiceNumber = document.getElementById('invoiceNumber').textContent;
            if (navigator.share) {
                navigator.share({
                    title: '发票详情',
                    text: invoiceNumber,
                    url: window.location.href
                });
            } else {
                copyToClipboard(window.location.href);
                showToast('发票链接已复制');
            }
        }

        function downloadInvoice() {
            showToast('正在生成PDF文件...');
            setTimeout(() => {
                showToast('发票PDF已下载到本地');
            }, 2000);
        }

        function sendInvoice() {
            const invoiceNumber = document.getElementById('invoiceNumber').textContent.replace('发票号码：', '');
            if (confirm(`确认将发票发送到客户邮箱？\n\n${invoiceNumber}\n\n发票将发送至客户登记的邮箱地址。`)) {
                showToast('发票邮件发送成功！');
            }
        }

        function printInvoice() {
            showToast('正在准备打印...');
            setTimeout(() => {
                window.print();
            }, 1000);
        }

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).catch(() => {
                const textArea = document.createElement('textarea');
                textArea.value = text;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
            });
        }

        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            initializeInvoice();
        });
    </script>
</body>
</html>